<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<div id="watermark" style="height:50vh"></div>
	</div>
</template>

<script>
	import watermark from '@/watermark/index.js'
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		mounted() {
			this.cans = new watermark(document.getElementById('watermark'))
			this.cans.addText('文字水印', {
				repeat: true,
				lineSpacing: 50,
				markSpacing: '50%'
			})
			this.cans.addText('测试水印', {
				repeat: true,
				lineSpacing: 50,
				markSpacing: '50%',
				start: 15
			})
			this.cans.addImage(require('../../assets/logo.png'), {
				repeat: true,
				markHeight: 30,
				lineSpacing: 50,
				start: 40
			})
			this.cans.draw(() => {
				console.log('canvas.draw')
			})
		},
		beforeDestroy() {
			this.cans.destory()
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
